<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vizuly - Weighted Tree</title>

    <!-- We use google fonts for many of the examples, but they are not necessary -->
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto|Raleway:600,400,200' rel='stylesheet' type='text/css'>

    <!-- Test container style sheets -->
    <link rel="stylesheet" href="/static/weight/styles/examples.css">

    <!-- Vizuly specific style sheets -->
    <link rel="stylesheet" href="/static/weight/lib/styles/vizuly.css">
    <link rel="stylesheet" href="/static/weight/lib/styles/vizuly_weightedtree.css">

    <!-- Supporting test container files:  Vizuly does NOT rely on these -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/static/weight/lib/styles/cssmenu.css">
    <script type="text/javascript" src="/static/weight/lib/jquery-2.1.1.min.js"></script>
    <script src="/static/weight/lib/cssmenu.js"></script>

    <!-- D3.js ... of course! -->
    <script src="/static/weight/lib/d3.min.js"></script>

    <!-- debug source scripts: start --> <!--
    <script src="src/namespace/namespace.js"></script>
    <script src="src/viz/_viz.js"></script>

    <script src="src/theme/_theme.js"></script>


    <script src="src/core/component.js"></script>
    <script src="src/core/data.js"></script>
    <script src="src/core/util.js"></script>
    <script src="src/core/color.js"></script>
    <script src="src/core/format.js"></script>
    <script src="src/svg/_svg.js"></script>
    <script src="src/svg/gradient.js"></script>
    <script src="src/svg/filter.js"></script>
    <script src="src/viz/weightedtree.js"></script>
    <script src="src/theme/weightedtree.js"></script>

    --> <!-- debug source scripts: end -->

    <script src="/static/weight/lib/vizuly_core.min.js"></script>
    <script src="/static/weight/lib/vizuly_weighted_tree.js"></script>
    <script src="/static/weight/weighted_tree_test.js"></script>

</head>

<body>

<div id='cssmenu'>
    <ul class="main-menu">
        <li class='active'>
            <a><span>Display</span><br><span class="setting"></span></a>
            <ul class="options" callback="changeSize">
                <li id="currentDisplay" class="selected"><a></a></li>
                <li item_value="1000,1000"><a>1000px - 1000px</a></li>
                <li item_value="800,600"><a>800px - 600px</a></li>
                <li item_value="375,667"><a>375px - 667px</a></li>
                <li item_value="320,568"><a>320px - 568px</a></li>
            </ul>
        </li>
        <li class='active'><a><span>Theme </span><br><span class="setting"></span></a>
            <ul class="options" callback="changeSkin">
                <li item_value="None"><a>None</a></li>
                <li item_value="Axiis" class="selected"><a>Axiis</a></li>
            </ul>
        </li>
    </ul>
</div>

<!-- Our main content container-->
<div class="container" style="width:100%">
    <div id="viz_container" class="z-depth-3">
    </div>
    <div style="margin-left:0px; height:0px; width:90%; margin:0px auto; margin-top:20px; font-family:Raleway; font-size:14px;">
    </div>
</div>

<script>
    //Once the document is ready we set javascript and page settings
    var screenWidth;
    var screenHeight;

    $(document).ready(function () {
        var rect;
        if (self==top) {
            rect = document.body.getBoundingClientRect();
        }
        else {
            rect = document.body.getBoundingClientRect();
        }

        //Set display size based on window size.
        screenWidth = (rect.width < 960) ? Math.round(rect.width*.95) : Math.round((rect.width - 210) *.95);

        screenHeight=750;

        d3.select("#currentDisplay")
                .attr("item_value", screenWidth + "," + screenHeight)
                .attr("class", "selected")
                .html("<a>" + screenWidth + "px - " + screenHeight + "px</a>");

        $("#cssmenu").menumaker({
            title: "Apple Suppliers Demo",
            format: "multitoggle"
        });

        // Set the size of our container element.
        viz_container = d3.selectAll("#viz_container")
                .style("width", screenWidth + "px")
                .style("height", screenHeight + "px");

        loadData();//调用weightedtree_test.js里的
    });

</script>
</body>
</html>